import { defineStore } from 'pinia'

import { accountLoginRequest, getUserInfoById, getUserMenusByRoleId } from '@/service/login/login'
import type { IAccount } from '@/types'
import { localCache } from '@/utils/cahe'
import router from '@/router'
import { mapMenusToPermissions, mapMenusToRoutes } from '@/utils/map-menus'
import useMainStore from '../main/main'

interface ILoginState {
  token: string
  userInfo: any
  userMenus: any
  permissions: string[]
}
const useLoginAccountStore = defineStore('login-account', {
  state: (): ILoginState => ({
    token: '',
    userInfo: {},
    userMenus: [],
    permissions: []
  }),
  actions: {
    async loginAccountAction(account: IAccount) {
      // 1.账号登入，将获取的账号信息 保存到 store 中
      const loginResult = await accountLoginRequest(account)
      const id = loginResult.data.id
      this.token = loginResult.data.token
      // console.log(loginResult)

      // 将 token 进行本地缓存，不然每次刷新都要重新输入密码
      localCache.setCache('token', this.token)

      // 在登入之前，获取用户的信息，获取该角色的权限，实现登录鉴权
      // 2.获取用户信息
      const userInfoRes = await getUserInfoById(id)
      const userInfo = userInfoRes.data
      this.userInfo = userInfo
      // 为什么打印出来的是 proxy，是因为state中的数据是响应式的
      // console.log(this.userInfo)

      // 3.根据角色id(不是用户id)获取用户的权限（菜单menus）
      const userMenusRes = await getUserMenusByRoleId(this.userInfo.role.id)
      const userMenus = userMenusRes.data
      this.userMenus = userMenus
      // console.log(userMenusRes, this.userInfo.role.id)

      // 4.进行本地缓存
      localCache.setCache('userInfo', userInfo)
      localCache.setCache('userMenus', userMenus)

      // 5.在登入之前获取所有的数据 roles/departments
      const mainStore = useMainStore()
      mainStore.fetchEntireDataAction()

      // 重要: 获取登录用户的所有按钮的权限
      const permissions = mapMenusToPermissions(userMenus)
      // console.log(userMenus)
      this.permissions = permissions

      // 重要：动态添加路由
      const routes = mapMenusToRoutes(userMenus)
      routes.forEach((route) => router.addRoute('main', route))

      // 5.处理登录操作,页面跳转；
      // 方式一：像服务器发送完网络请求后，返回的是一个 promise，可以then一下，判断有没有处理完网络请求，处理玩了在进行页面跳转
      // 方式二：在这里直接跳转，在 router 中判断是否登录进行拦截
      router.push('/main')
    },
    loadLocalCacheAction() {
      // 在用户刷新 main 页面时，重新注册路由
      // 条件是要在用户获取数据后，动态添加路由
      const token = localCache.getCache('token')
      const userInfo = localCache.getCache('userInfo')
      const userMenus = localCache.getCache('userMenus')

      if (token && userInfo && userMenus) {
        this.token = token
        this.userInfo = userInfo
        this.userMenus = userMenus

        // 刷新后重新请求所有的数据,因为这些数据是可以变化的
        // 1..请求所有roles/departments数据
        const mainStore = useMainStore()
        mainStore.fetchEntireDataAction()

        // 2.获取按钮的权限
        const permissions = mapMenusToPermissions(userMenus)
        this.permissions = permissions

        // 3.动态添加路由
        const routes = mapMenusToRoutes(userMenus)
        routes.forEach((route) => router.addRoute('main', route))
      }
    }
  }
})
export default useLoginAccountStore
